<script setup lang="ts">
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: ""
  },
  size: {
    type: String,
    default: "32px"
  },
  bgColor: {
    type: String,
    default: "transparent"
  }
})

const emit = defineEmits<{
  'icon-click': [name: string]
}>();

// 处理图标点击事件
const handleIconClick = (name: string) => {
  emit('icon-click', name);
};
</script>

<template>
  <svg class="tarot-icon" :name="name" :style="{width: size, height: size}"  @click="handleIconClick(name)">
    <use :xlink:href="`#tarot-${props.name}`"/>
  </svg>
</template>

<style lang="scss" scoped>
.tarot-icon {
  color: var(--theme-primary);
}

</style>
